/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据c
 *  1.2 展示到下拉菜单中
 */


//  * 1.1 获取频道列表数据
  //  由于有两处都需要实现此功能所以直接封装一个函数
 async function setChanleList(){
      const res=await axios({
      url:'/v1_0/channels',
      // 用async和await可以拿到返回成功的结果
    })
    // console.log(res);
   const htmlstr = `<option value="" selected>请选择文章频道</option>`+res.data.channels.map(item=>
    // console.log(item);
    // 这里需要注意当箭头函数大括号里面只有一个语句时,需要添加return语句,或者删掉大括号
    `<option value="${item.id}">${item.name}</option>`
 ).join('')
//  将数组转换成字符串
    // console.log(htmlstr)
    // 插入表单中
   document.querySelector('.form-select').innerHTML=htmlstr
   }
   setChanleList()
  //  默认网页运行后调用一次


/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormDatac
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
// 那个加号的盒子用的label标签，点击后就相当于点击了文件上传表单，因为文件上传表单不好改成带加号盒子样式，
// 再将与加号盒子对应的文件上传表单隐藏起来，即可实现此效果
  // * 2.2 选择文件并保存在 FormData
  document.querySelector('.img-file').addEventListener('change', async e=>{
    // 上传图片
      const file=e.target.files[0]
      // 由于后端接口文档要求传入的数据是form-data类型
      const fd=new FormData()
      fd.append('image',file)
      // * 2.3 单独上传图片并得到图片 URL 网址
      const res=await axios({
        url:'/v1_0/upload',
        method:'post',
        data:fd
      })
      // console.log(res);
//  * 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
const imgUrl=res.data.url
// 在这里自己做了一个bug优化，如果没有选择图片，则图片内容不发生变化
   imgUrl&&(document.querySelector('.rounded').src =imgUrl)
    document.querySelector('.rounded').classList.add('show')
    // 将原来的带加号的那个框让他隐藏
    document.querySelector('.place').classList.add('hide')
  })
  // 要求点击图片可以重新切换封面
  // 思路：img点击事件，用js的方式去触发文件选择事件

document.querySelector('.rounded').addEventListener('click',()=>{
  //  用js的方法去自动点击这个表单
  document.querySelector('.img-file').click()
  // 点击的一瞬间2.2事件再次被触发
})


/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
  // * 3.1 基于 form - serialize 插件收集表单数据对象
  document.querySelector('.send').addEventListener('click',async e=>{
    // 在这里进行一个判断
    // 注意按钮获取数据用的是innerhtml
    if(e.target.innerHTML!=='提交'){return}
     
      const form = document.querySelector('.art-form')
      const data = serialize(form, { hash: true, empty: true })
      // console.log(data);
      // 发布文章不需要id属性，所以这个属性可以删除掉，这个属性是为了后续编辑使用
      // 删除对象属性,并再次打印出来了
      delete data.id
      // console.log(data);
      // 应该收集四个,但是醉后结果只收集了三个,是因为封面那个信息是图片,不属于表单信息,用这个插件收集不到 
      //  但是上传到服务器的属性应该是四个,应该包含这个图片属性,=
      // 自己收集封面图片的地址添加到data属性里面,根据接口文档,需要传递一个对象,由两个属性,type文章封面类型和images文章图片地址,其中type默认传递数字1代表一张图的意思
      data.cover = {
        type: 1,
        // 后端要求放入的是数组类型
        images: [document.querySelector('.rounded').src]
      }
      // 在此打印
      // console.log(data)
      // * 3.2 基于 axios 提交到服务器保存
      try {
        const res = await axios({
          url: '/v1_0/mp/articles',
          method: 'POST',
          data: data
        })
        // console.log(res)
        myAlert(true, '发布成功')
        //  成功之后,重置表单跳转到列表页
        form.reset()
        //  这里需要注意,清空表单元素之清空了表单内部除了图片之外的东西,需要手动清空图片
        document.querySelector('.rounded').src = ''
        document.querySelector('.rounded').classList.remove('show')
        // 将原来的带加号的那个框让他隐藏的属性也要移除掉
        document.querySelector('.place').classList.remove('hide')
        //  其次富文本编译器也要重置,需要手动重置
        editor.setHtml('')
        setTimeout(e =>
          location.href = '../content/index.html'
          , 1000)


        // 出现提示框,之前封装过提示框函数,直接调用用try-catch直接捕获失败的结果
      } catch (error) {
        //  console.log(error.response.data.message);
        // 继续调用提示框函数
        myAlert(false, error.response.data.message)
      }
    
})


/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
// 为了实现不污染全局变量，可以建立了一个自己调用函数

;(function(){
  // 查询网址问号后面的东西
  // console.log(location.search)
  const patamsstr=location.search
  const params=new URLSearchParams(patamsstr)
  // console.log(params);
  
  params.forEach(async(value,key)=>{
    console.log(value,key)
    // 当前要有编辑文章，id被传过来
    if(key==='id'){
      // 修改标题内容
      document.querySelector('.title span').innerHTML='修改文章'
      // 修改按钮
      document.querySelector('.send').innerHTML='修改'
      // 获取文章参数并回显
      const res=await axios({
        url:`/v1_0/mp/articles/${value}`,
      })
      console.log(res);
      // 回显数据，不可以直接遍历对象的属性，用属性当类名直接给标签赋值
      // 仅组织我需要的数据对象，为后续遍历做准备
      const dataobj={
        channel_id:res.data.channel_id,
        title:res.data.title,
        // 封面图片地址
        rounded:res.data.cover.images[0],
       content:res.data.content,
       id:res.data.id
      }
      // 遍历对象属性，中间有两个比较特殊，一个是图片，另一个是编辑文本器
      Object.keys(dataobj).forEach(key=>{
        if(key==='rounded'){
          if(dataobj[key]){
            // 有封面
            document.querySelector('.rounded').src=dataobj[key]
            document.querySelector('.rounded').classList.add('show')
            document.querySelector('.place').classList.add('hide')
          }
         
        } else if (key === 'content') {
        // 将富文本编译器文字显示了出来
          editor.setHtml(dataobj[key])
        }else{
          // 永数据对象的属性名来找到标签并将数据会先到标签里面,用属性选择器
          // 注意这里是对表单元素进行赋值，对表单元素进行赋值只能用value
          document.querySelector(`[name=${key}]`).value=dataobj[key]
        }
      })


    }
  })
})();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
// 由于提交数据和修改数据用的是同一个表单域，所以当点击的时候会再次提交数据到服务器上面，所以用按钮文字做一个判断
// 否则就会把文章再次发表一次
  
    // 监听用户点击按钮的事件、
    document.querySelector('.send').addEventListener('click',async e=>{
      //  进行判断
      if (e.target.innerHTML !== '修改') {return}
      //  先把最新的数据获取出来
      const form = document.querySelector('.art-form')
      const data = serialize(form, { hash: true, empty: true })
      // console.log(data)
      // 注意在data对象里面有一个属性是关于正在编辑的对象属性
        // * 5.2 调用编辑文章接口，保存信息到服务器
        try{
          const res = await axios({
            url: `/v1_0/mp/articles/${data.id}`,
            method: 'PUT',
            data: {
              ...data,
              cover: {
                type: document.querySelector('.rounded').src ? 1 : 0,
                images: [document.querySelector('.rounded').src]
              }
            }
          })
          console.log(res);
          // 用消息警示框提示消息
          myAlert(true,'修改成功')
          // 下来跳转页面
          setTimeout(()=>
          location.href='../content/index.html'
        ,1500)
        }catch(error){
          //  console.dir(error)
          myAlert(false,error.response.data.message)
        }
    })
